﻿@model List<ViewModel_ManualTestPaper>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组卷</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h2>组卷</h2>
        <p><strong>当前总分: </strong><span id="scoreCounter">0</span></p>
        <form asp-action="AddPaperSumbit" asp-controller="Paper">
            <!-- 试卷信息 -->
            <div class="form-group">
                <label for="paperName">试卷名称:</label>
                <input type="text" class="form-control" name="paperName" required>
            </div>

            <!-- 选择试题 -->
            <h4>选择试题</h4>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>问题名称</th>
                        <th>题目类型</th>
                        <th>题目分数</th>
                        <th>难度</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var question in Model)
                    {
                        // 如果内容过长只展示前面的部分
                        string displayContent = question.question_content.Length > 30
                        ? question.question_content.Substring(0, 30) + "..."
                        : question.question_content;
                        <tr>
                            <td><input type="checkbox" class="questionCheckbox" data-score="@question.type_score" name="selectedQuestions" value="@question.question_id"></td>
                            <input type="hidden" name="questionIds" value="@question.question_id">
                            <td>@displayContent</td>
                            <td>@question.type_name</td>
                            <td>@question.type_score</td>
                            <td>@question.question_difficulty</td>
                        </tr>
                    }
                </tbody>
            </table>

            <!-- 提交按钮 -->
            <div class="text-center">
                <input type="submit" value="提交组卷" class="btn btn-primary" />
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const checkboxes = document.querySelectorAll('.questionCheckbox');
            const scoreCounter = document.getElementById('scoreCounter');
            let currentScore = 0;

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    let questionScore = parseInt(this.getAttribute('data-score'));
                    if (this.checked) {
                        currentScore += questionScore;
                    } else {
                        currentScore -= questionScore;
                    }
                    scoreCounter.textContent = currentScore;
                });
            });
        });
    </script>
</body>

</html>
